import React from 'react';
import { Paper } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Collapse from '@material-ui/core/Collapse';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { red } from '@material-ui/core/colors';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const useStyles = makeStyles(theme => ({
    root: {
        maxWidth: 800,
    },
    media: {
        height: 0,
        paddingTop: '56.25%', // 16:9
    },
    expand: {
        transform: 'rotate(0deg)',
        marginLeft: 'auto',
        transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest,
        }),
    },
    expandOpen: {
        transform: 'rotate(180deg)',
    },
    avatar: {
        backgroundColor: red[500],
    },
    ps: {
        display: 'flex',
        alignItems: 'center',
        justifyContent:'center',
        position: 'fixed',
        left: 0,
        top: 100,
        zIndex: 180,
        width: '100%',
        height: 300
    }
}));

// 当前播放视频信息
const VideoDetail = ({ video }) => {
    const classes = useStyles();
    const [expanded, setExpanded] = React.useState(false);
    if (!video) return <div className={classes.ps}>loading...</div>
    // 视频地址
    const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;


    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    return (
        <Card className={clsx(classes.root,classes.ps)} >
            <CardHeader title={video.snippet.title} />
            <CardMedia title={video.snippet.title}>
                <Paper elevation={6} style={{ height: '100%' }}>
                    // 直接提供的是视频的播放地址
                    <iframe frameBorder='0' height='100%' width='100%' title="video player" src={videoSrc} />
                </Paper>
            </CardMedia>
            <CardContent>
                <Typography variant="h6">
                    {video.snippet.title}
                </Typography>
            </CardContent>
            <CardActions disableSpacing>
                <IconButton aria-label="add to favorites">
                    <FavoriteIcon />
                </IconButton>
                <IconButton aria-label="share">
                    <ShareIcon />
                </IconButton>
                <IconButton
                    className={clsx(classes.expand, {
                        [classes.expandOpen]: expanded,
                    })}
                    onClick={handleExpandClick}
                    aria-expanded={expanded}
                    aria-label="show more"
                >
                    <ExpandMoreIcon />
                </IconButton>
            </CardActions>
            <Collapse in={expanded} timeout="auto" unmountOnExit>
                <CardContent>
                    <Typography paragraph>{video.snippet.description}</Typography>
                </CardContent>
            </Collapse>
        </Card>
    );
}

export default VideoDetail;